<template>
  <div id="goodsDetail">
    <!-- 导航栏 -->
    <van-nav-bar :title="$t('goodsDetail.goodsDetail')" left-arrow @click-left="$router.go(-1)" />
    <!-- 大图 -->
    <van-image width="100%" height="80%" :src="goodsDeatailData.small_image" />
    <!-- 商品名称 -->
    <div class="productInfo">
      <div class="title">{{goodsDeatailData.product_name}}</div>
      <div class="subTitle">{{goodsDeatailData.spec}}</div>
      <span class="originPrice">{{goodsDeatailData.price | moneyFormat}}</span>
      <span class="price">{{goodsDeatailData.origin_price | moneyFormat}}</span>
      <span class="totalSales">{{ $t('goodsDetail.sold') }}:{{goodsDeatailData.sell_num}}</span>
      <van-divider />
      <div class="shippingInfo">
        <van-icon name="cluster-o" />{{ $t('goodsDetail.goodsTips') }}
      </div>
      <van-divider />
      <div class="shippingInfo">
        <van-icon name="clock-o" />{{ $t('goodsDetail.quickTime') }}
      </div>
    </div>
    <!-- 规格 -->
    <div class="specifications">
      <div class="specificationsTitle">{{ $t('goodsDetail.specifications') }}</div>
      <van-divider dashed />
      <div class="conditions">
        <span>{{ $t('goodsDetail.preservationConditions') }}</span>
        <span class="conditionsOne">{{ $t('goodsDetail.coldStorage') }}</span>
      </div>
      <van-divider dashed />
      <div class="conditions">
        <span>{{ $t('goodsDetail.shelfLife') }}</span>
        <span class="conditionsTwo">{{ $t('goodsDetail.day') }}</span>
      </div>
      <van-divider dashed />
    </div>
    <!-- 详情 -->
    <div class="showGoods">
      <img :src="goodsDeatailData.small_image" alt />
      <img src="https://img.ddimg.mobi/3f280ff77ab3d1571213379189.jpg?width=750&height=1869" alt />
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" />
      <van-goods-action-button type="warning" :text="$t('goodsDetail.addToCar')" @click="onJoinCart(goodsDeatailData.id)" />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  data () {
    return {
      goodsDeatailData: []
    }
  },
  methods: {
    // 加入购物车
    onJoinCart (id) {
      if (!localStorage.getItem('token')) {
        this.$router.push('/login')
        this.$toast('请先登录！')
      } else {
        this.$http
          .post(`/addCart`, {
            user_id: localStorage.getItem('userId'),
            goods_id: id
          })
          .then(res => {
            this.$toast('成功加入购物车')
          })
      }
    }
  },
  created () {
    // 获取商品信息详情
    let pid = this.$route.params.id
    this.$http.get(`/goodsDetail/${pid}`).then(res => {
      this.goodsDeatailData = res.data.data[0]
    })
  }
}
</script>

<style lang="less">
#goodsDetail {
  .productInfo {
    background-color: white;
    padding: 0.5rem;
    .title {
      color: black;
      font-size: 1rem;
    }
    .subTitle {
      padding: 0.5rem 0;
      color: grey;
      font-size: 0.6rem;
    }
    .originPrice {
      color: #e25450;
      padding-right: 0.5rem;
      font-size: 1rem;
    }
    .price {
      color: grey;
      font-size: 0.5rem;
      text-decoration: line-through;
    }
    .totalSales {
      float: right;
      color: #e25450;
      font-size: 1rem;
    }
    .shippingInfo {
      font-size: 0.6rem;
      height: 1rem;
      color: grey;
    }
  }

  .specifications {
    // width: 100%;
    background-color: white;
    margin-top: 1rem;
    padding-left: 0.5rem;
    .specificationsTitle {
      padding-top: 1rem;
      font-size: 1rem;
      color: black;
    }
    .conditions {
      font-size: 0.6rem;
      height: 1rem;
      color: grey;
      .conditionsOne {
        padding-left: 2rem;
      }
      .conditionsTwo {
        padding-left: 2.5rem;
      }
    }
  }

  .showGoods {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
</style>
